<template>
  <div>
    <el-menu-item :index="item.path" v-if="!item.children">      
      {{item.name}}
      <!-- <template #title>{{ item.name }}</template> -->
    </el-menu-item>
    <el-sub-menu :index="item.path" v-else popper-class="submenu-item">
      <template #title>
        <span>{{ item.name }}</span>
      </template>
      <NavItem v-for="v in item.children" :key="v.path" :item="v"></NavItem>
    </el-sub-menu>
  </div>
</template>
<script>
import { reactive } from "vue";
export default {
  name: "NavItem",
  props: ["item"],
  setup(props, context){
    return {}
  }
};
</script>
<style lang="scss" scoped>
.icon-img-item {
  // width: 28px;
  height: 28px;
  opacity: 1;
  padding-right: 12px;
}
</style>
<style lang="scss">
.el-menu-item.is-active{
  background: #409EFF;
}
.el-submenu__title {
  width: 298px;
  height: 64px;
  opacity: 1;
  padding-left: 44px !important;
  padding-right: 28px !important;
  display: flex;
  align-items: center;
  span {
    width: 72px;
    height: 24px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 24px;
    color: #334762;
    opacity: 1;
  }
  i {
    font-size: 18px !important;
    opacity: 1;
    right: 28px !important;
    top: 23px;
    margin-top: 0px !important;
  }
  .img-active{
    display: none;
  }
  .img-default{
    display: block;
  }
}
/* 二级菜单展开激活时样式 */
.el-submenu.is-active .el-submenu__title {
  background: #f8f8ff;
  border-left: 3px solid #8284fa !important;
  span {
    color: #8284fa;
  }
  .img-active{
    display: block;
  }
  .img-default{
    display: none;
  }
}
.el-submenu .el-menu-item {
  height: 53px;
  padding: 0 !important;
  padding-left: 84px !important;
  span {
    width: 80px;
    height: 21px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 21px;
    opacity: 1;
    color: #8f9bb3;
  }
  &.is-active {
    display: flex;
    align-items: center;
    &:before {
      content: "";
      position: absolute;
      left: 58px;
      display: flex;
      width: 6px;
      height: 6px;
      background: #8284fa;
      border-radius: 50%;
      opacity: 1;
    }
    span {
      color: #8284fa;
    }
  }
}
</style>